// 导入 react 包
import React from "react";

import { Toast } from "antd-mobile";

// 导入 axios 包
// import axios from "axios";
import {API} from '../../utils'

// 导入 react-virtualized
// import { List, AutoSizer } from "react-virtualized";
import List from 'react-virtualized/dist/commonjs/List'
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer'

import { getCurrentCity } from "../../utils/city";

import NavHeader from "../../components/NavHeader";

// 引入 自定义 样式文件
import "./index.scss";

// 自己修改后端的数据 封装
const formatCityList = list => {
  //  定义一个 存储城市信息
  const cityList = {};
  // 循环 所有的城市数据
  list.forEach(itme => {
    // console.log(itme);
    // 截取short 的第一个字母
    const firstLetter = itme.short.slice(0, 1);
    // 判断 cityList 中 有没有 以 cityLetter为键 的 对象 有 就直接在里面添加数据 没有就创建一个新的属性并把数据添加到当前属性中
    if (firstLetter in cityList) {
      // 当执行到这里说明 CityList 中 已经 存在了firstLetter 属性了直接在当前属性中添加数据就行
      cityList[firstLetter].push(itme);
    } else {
      // 当执行到这里说明CityList 中 没有 firstLetter 属性 ，那么就要创建属性 并把数据添加到属性中
      cityList[firstLetter] = [itme];
    }
  });
  // console.log(cityList);
  // 获取 索引数组数
  const cityIndex = Object.keys(cityList).sort();
  return { cityList, cityIndex };
};

// 格式化 分类名称
const formatCateName = name => {
  switch (name) {
    case "#":
      return "当前定位";
    case "hot":
      return "热门城市";
    default:
      return name.toUpperCase();
  }
};

/**
 * 分类名称的高度 @type { number }
 */
const CATE_HEIGHT = 36;
/**
 * 城市名称的高度
 */
const CITY_NAME_HEIGHT = 50;

const CITY_WITH_HOUSES = ["北京", "上海", "深圳", "广州"];

class CityList extends React.Component {
  state = {
    cityList: {},
    cityIndex: [],
    activeIndex: 0
  };

  // 创建 ref 对象 ，用来获取 List 组件实例
  refList = React.createRef();

  // 获取所有城市列表
  componentDidMount() {
    //  获取城市列表数据
    this.getAllCity();
    this.renderCityIndex();
  }
  async getAllCity() {
    const { data } = await API.get("/area/city", {
      params: {
        level: 1
      }
    });
    const { cityList, cityIndex } = formatCityList(data.body);

    // 获取热门参数的数据并添加到 cityList 与 cityIndex 中
    const res = await API.get("/area/hot");
    // console.log(res);
    cityList["hot"] = res.data.body;
    cityIndex.unshift("hot");

    // 当前定位城市
    const city = await getCurrentCity();
    // 添加 当前定位
    cityList["#"] = [city];
    cityIndex.unshift("#");

    this.setState(
      {
        cityList,
        cityIndex
      },
      () => {
        this.refList.current.measureAllRows();
      }
    );
  }

  //  列表渲染
  rowRenderer = ({
    key,
    index, // 索引号
    isScrolling, // 表示list 列表当前是否在滚动
    isVisible, // 表示是否可见（不包括预渲染的行）
    style // 表示给每一行设置的样式（用来给每一行定位）！！！ 注意： 必须要给每一行设置style！！！
  }) => {
    const cityCateName = this.state.cityIndex[index];
    const list = this.state.cityList[cityCateName];
    return (
      <div key={key} style={style} className="city">
        <div className="title">{formatCateName(cityCateName)}</div>
        {list.map(item => (
          <div
            key={item.value}
            className="name"
            onClick={() => {
              if (CITY_WITH_HOUSES.indexOf(item.label) > -1) {
                localStorage.setItem(
                  "itcast_city",
                  JSON.stringify({ label: item.label, value: item.value })
                );
                this.props.history.go(-1);
              } else {
                Toast.info("该城市暂无房屋数据", 1.5);
              }
            }}
          >
            {item.label}
          </div>
        ))}
      </div>
    );
  };

  // 渲染右侧城市索引列标
  renderCityIndex = () => {
    // console.log(this.state.cityIndex);

    return this.state.cityIndex.map((item, index) => (
      <li
        key={index}
        className="city-index-item"
        onClick={() => {
          // console.log(this.refList.current.scrollToRow(index));
          this.refList.current.scrollToRow(index);
          this.setState({
            activeIndex: index
          });
        }}
      >
        <span
          className={index === this.state.activeIndex ? "index-active" : ""}
        >
          {item === "hot" ? "热" : item.toUpperCase()}
        </span>
      </li>
    ));
  };

  // 动态计算每行高度
  calcRowHeight = ({ index }) => {
    const { cityIndex, cityList } = this.state;
    const cityCateName = cityIndex[index];
    const list = cityList[cityCateName];
    return CATE_HEIGHT + CITY_NAME_HEIGHT * list.length;
  };

  // 监听 List 的滚动
  //overscanStartIndex,
  // overscanStopIndex,
  // startIndex,
  // stopIndex
  onRowsRendered = ({ startIndex }) => {
    if (this.state.activeIndex === startIndex) return;
    this.setState({
      activeIndex: startIndex
    });
  };

  render() {
    return (
      <div className="cityName">
        <NavHeader>城市选择</NavHeader>

        <AutoSizer>
          {({ height, width }) => (
            <List
              ref={this.refList}
              height={height - 45}
              rowCount={this.state.cityIndex.length}
              rowHeight={this.calcRowHeight}
              rowRenderer={this.rowRenderer}
              onRowsRendered={this.onRowsRendered}
              scrollToAlignment="start"
              width={width}
            />
          )}
        </AutoSizer>
        <ul className="city-index">{this.renderCityIndex()}</ul>
      </div>
    );
  }
}

export default CityList;
